<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-tabs v-model="activeName" type="card">
                        <el-tab-pane label="组织资源" name="first">
                            <el-tree
                                    :data="tagsList"
                                    :props="props"
                                    :load="loadNode"
                                    highlight-current
                                    lazy
                                    @node-click="handleNodeClick"
                                    @node-expand="handleNodeClick"
                                    ref="tree"
                                    node-key="id"
                            >
                            </el-tree>
                        </el-tab-pane>
                        <el-tab-pane label="集中器" name="second">
                            <div class="text item">
                                集中器 <img src="../../../assets/logo.png" alt="" style="width: 12px;margin-left: 20%;">
                            </div>
                            <div class="text item">
                                集中器 <img src="../../../assets/logo.png" alt="" style="width: 12px;margin-left: 20%;">
                            </div>
                            <div class="text item">
                                集中器 <img src="../../../assets/logo.png" alt="" style="width: 12px;margin-left: 20%;">
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
            <el-col :span="18">
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div style="margin-bottom: 10px;float: right;width: 20%;">
                    <el-input placeholder="请输入内容" v-model="input2">
                        <el-button slot="append" icon="el-icon-search" style="border: 1px solid #409EFF;background-color: #409EFF;color: #fff;"></el-button>
                    </el-input>
                </div>
                <div class="grid-content bg-purple">
                    <el-table ref="singleTable" stripe :data="tableData" highlight-current-row border style="width: 100%">
                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column property="date" label="设备名称"></el-table-column>
                        <el-table-column property="name" label="设备编号"></el-table-column>
                        <el-table-column property="address" label="组织"></el-table-column>
                        <el-table-column property="address" label="集中器"></el-table-column>
                        <el-table-column property="address" label="设备类型"></el-table-column>
                        <el-table-column property="" label="定位">
                            <template slot-scope="scope">
                                <img src="../../../assets/logo.png" alt="" style="width: 12px;" @click="goPosi(scope.row)">
                            </template>

                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
                        </el-pagination>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {regionalRoot,getSubOrgList} from  '../../../api/index';
    export default {
        name: "gisMapChild",
        data(){
            return {
                activeName:'first',
                tagsList:[],
                lazyInitData:[],
                clickedId:'',
                props: {
                    label: 'orgName',
                    children: 'zones',
                    isLeaf: 'leaf'
                },
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                input2:'',
                options: [{
                    value: '1',
                    label: '10'
                }, {
                    value: '2',
                    label: '20'
                }, {
                    value: '3',
                    label: '30'
                }],
                value: '10',
                cur_page:1,
                currData:null
            }
        },
        created(){
            this.getData();
        },

        methods:{
            loadNode(node, resolve) {
                if (node.level === 0) {
                    return resolve(this.tagsList);
                }
                // if (node.level > 1) return resolve([]);

                setTimeout(() => {
                    getSubOrgList({
                        pid:this.clickedId
                    }).then((res)=>{
                        console.log(res)
                        this.lazyInitData = res.datas;

                        resolve(this.lazyInitData);
                    })


                }, 500);
            },
            handleNodeClick(data,node) {
                console.log(data);
                console.log(node.parent);
                if(data.pid === 0){
                    this.clickedId = data.id;
                    return ;
                }
                this.clickedId = data.id;
            },
            //获取数据
            getData(){
                regionalRoot({

                }).then((res) =>{
                    console.log(res)
                    var dataArr = new Array();
                    dataArr[0] = res.expandData.root;
                    dataArr[0]['children'] = res.expandData.childrens;
                    this.tagsList = dataArr;

                    this.clickedId = this.tagsList[0].id;
                    console.log(dataArr)
                })
            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
            },
            goPosi(val){
                console.log(val)
                this.currData = val;
                this.$parent.$parent.setCenterMap();
            },
        }
    }
</script>

<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
        margin-left: 20px;
    }

</style>